import React, { useState, useEffect } from "react";
import { Empty, Card } from "antd";
import "../../css/app.css";

const Demand = () => {
  // 假设需求列表的状态
  const [demands, setDemands] = useState([]);

  useEffect(() => {
    // 这里模拟获取当前用户的需求列表的异步操作
    // 替换成实际的API调用获取需求列表
    fetchDemands().then(setDemands);
  }, []); // 空依赖数组确保仅在组件挂载时运行

  // 模拟获取需求列表的函数
  const fetchDemands = () => {
    // 这里应该是一个异步操作，返回Promise
    // 假设从数据库获取到了需求列表
    return Promise.resolve([
      { id: 1, title: "需求标题", description: "需求描述" },
      { id: 2, title: "需求标题", description: "需求描述" },
      { id: 3, title: "需求标题", description: "需求描述" },
      { id: 4, title: "需求标题", description: "需求描述" },
      { id: 5, title: "需求标题", description: "需求描述" },
      // ...其他需求对象
    ]);
  };

  // 根据需求列表是否为空来渲染不同的组件
  if (demands.length === 0) {
    return (
      <Empty
        image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
        imageStyle={{ height: 60 }}
        description={<span>空空如也~</span>}
      >
        <a href="/bailmentlist/bailissue">去发布我的需求</a>
      </Empty>
    );
  }

  // 如果有需求，则渲染需求卡片
  return (
    <div>
      {demands.map((demand) => (
        <Card
          key={demand.id} // 使用需求的id作为key
          title={demand.title}
          extra={<a href={`/bailmentlist/bailissue/${demand.id}`}>更多信息</a>}
        >
          <p>{demand.description}</p>
        </Card>
      ))}
      <div className="publish-demand-link">
        <a href="/bailmentlist/bailissue">继续发布需求</a>
      </div>
    </div>
  );
};

export default Demand;



//2
// import React from 'react';
// import { Empty } from 'antd';

// const Demand = () => (
//   //加一个条件判断，如果没有需求就渲染空状态
//   <Empty
//     image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
//     imageStyle={{
//       height: 60,
//     }}
//     description={
//       <span>
//         空空如也~
//       </span>
//     }
//   >
//     <a href="/usercenter/bailissue">去发布我的需求</a>
//   </Empty>
//   //有需求就渲染需求组件
// );
// export default Demand;
